<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 导入element-plus样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <!-- 导入element-plus组件库 -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- 导入element-plus组件库国际化 -->
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
    <!-- 导入iconify图标库 -->
    <script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
    <style>
      .box-card {
        width: 300px;
        height: 500px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 1px solid #aaa;
      }
      .el-card__header {
        padding: 5px;
      }
      .card-title {
        text-align: center;
      }
      .card-header {
        display: flex;
      }
      .el-card__body {
        padding: 5px;
      }
      .item {
        display: flex;
        justify-content: space-between;
        padding: 0 5px 0 10px;
        margin: 5px 0;
        border-radius: 4px;
        background: lightblue;
      }
      .remove {
        display: flex;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-card class="box-card">
        <template #header>
          <div class="card-title">ToDoList</div>
          <div class="card-header">
            <el-input
              v-model="inputVal"
              placeholder="请输入待办事项"
            ></el-input>
            <el-button type="primary" style="margin-left: 10px" @click="add">
              Add
            </el-button>
          </div>
        </template>
        <template v-for="(item,index) in itemList" :key="index">
          <div class="item">
            <el-checkbox
              v-model="item.completed"
              :label="item.name"
            ></el-checkbox>
            <div class="remove" @click="remove(item)">
              <span
                class="iconify"
                style="color: red; cursor: pointer"
                data-icon="ep:delete-filled"
                data-width="18"
                data-height="18"
              ></span>
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <script>
      //localStroage保存数据
      const KEY = "my-todos"; //名称
      const defaultToDo = [
        { name: "吃饭", completed: true },
        { name: "睡觉", completed: true },
        { name: "打豆豆", completed: true },
      ];
      const fnStorage = {
        getStorage: function () {
          return JSON.parse(localStorage.getItem(KEY) || "[]");
        },
        setStorage: function (todos) {
          localStorage.setItem(KEY, JSON.stringify(todos));
        },
      };
      // 将默认待办事项写入localStroage
      if (fnStorage.getStorage().length === 0) {
        fnStorage.setStorage(defaultToDo);
      }
      const App = {
        data() {
          return {
            inputVal: "",
            itemList: fnStorage.getStorage(),
          };
        },
        methods: {
          add() {
            if (this.inputVal) {
              this.itemList.push({ name: this.inputVal, completed: false });
              this.inputVal=''
            }
          },
          remove(item) {
            this.itemList.splice(this.itemList.indexOf(item), 1);
          },
        },
        watch: {
          itemList: {
            handler: function (itemList) {
              fnStorage.setStorage(itemList);
            },
            deep: true,
          },
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
        size: "small",
      });
      app.mount("#app");
    </script>
  </body>
</html>
